<template>
  <div class="userList">
    <el-table
        :data="userArr.filter(data => !search || data.nickName.toLowerCase().includes(search.toLowerCase()))"
        :selectable="false"
        height="650"
    >
      <el-table-column type="index" label="编号"
                       width="100"></el-table-column>
      <el-table-column label="头像" width="150">
        <template slot-scope="scope">
          <!--scope.row代表当前遍历的数组中的对象-->
          <el-avatar :size="70" :src="scope.row.userIcon"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="userName" width="100"></el-table-column>
      <el-table-column label="证件号" prop="idNumber" width="200"></el-table-column>
      <el-table-column label="邮箱" prop="userEmail" width="200"></el-table-column>
      <el-table-column label="住址" prop="userAddress" width="150"></el-table-column>
      <el-table-column label="联系电话" prop="userPhone" width="150"></el-table-column>

<!--      <el-table-column label="操作"  fixed="right"  width="200">-->
<!--       -->
<!--      </el-table-column>-->


      <el-table-column align="right"  fixed="right" width="150">
        <template slot="header" slot-scope="scope">
          <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-switch
              style="display: block"
              v-model="userArr[scope.$index].isDeleted"
              @change="setCurrent(scope.$index,scope.raw)"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="解除"
              inactive-text="禁用">
          </el-switch>
        </template>
        <!--scope代表每行对应的数据里面的index属性代表下标,
        里面的row代表每行对应的数组中的对象-->
<!--        <template slot-scope="scope">-->
<!--          &lt;!&ndash;confirm确认事件&ndash;&gt;-->

<!--          <el-popconfirm @confirm="userDelete(scope.$index, scope.row)"-->
<!--                         title="确定删除这个用户吗?"-->
<!--          >-->
<!--            <el-button size="mini"-->
<!--                       type="danger" slot="reference">删除</el-button>-->
<!--          </el-popconfirm>-->
<!--        </template>-->
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

import {userList} from "@/api/admin_api";
import {delUser} from "@/api/admin_api";

export default {
  name: "user-list",
  data(){
    return{
      userArr:[
        // {userIcon:require('@/assets/网格员1号.jpg'),userName:'user1',idNumber:'1111@qq.com',userEmail:'男',userAddress:'五栋2303',userPhone:'12345678',isDeleted:'0'},
        // {userIcon:require('@/assets/网格员2号.jpg'),userName:'user2',idNumber:'1112@qq.com',userEmail:'女',userAddress:'五栋2303',userPhone:'12345678',isDeleted:'0'},
        // {userIcon:require('@/assets/网格员3号.jpg'),userName:'user3',idNumber:'1113@qq.com',userEmail:'男',userAddress:'五栋2303',userPhone:'12345678',isDeleted:'0'},
        // {userIcon:require('@/assets/网格员4号.jpg'),userName:'user4',idNumber:'1114@qq.com',userEmail:'男',userAddress:'五栋2303',userPhone:'12345678',isDeleted:'0'},
        // {userIcon:require('@/assets/网格员5号.jpg'),userName:'user5',idNumber:'1115@qq.com',userEmail:'女',userAddress:'五栋2303',userPhone:'12345678',isDeleted:'0'},
        // {userIcon:require('@/assets/网格员6号.jpg'),userName:'user6',idNumber:'1116@qq.com',userEmail:'男',userAddress:'五栋2303',userPhone:'12345678',isDeleted:'1'},
        // {userIcon:require('@/assets/网格员7号.jpg'),userName:'user7',idNumber:'1117@qq.com',userEmail:'女',userAddress:'五栋2303',userPhone:'12345678',isDeleted:'1'},
        // {userIcon:require('@/assets/网格员8号.jpg'),userName:'user8',idNumber:'1118@qq.com',userEmail:'女',userAddress:'五栋2303',userPhone:'12345678',isDeleted:'0'},
        // {userIcon:require('@/assets/网格员9号.jpg'),userName:'user9',idNumber:'1119@qq.com',userEmail:'男',userAddress:'五栋2303',userPhone:'12345678',isDeleted:'0'},
        // {userIcon:require('@/assets/网格员10号.jpg'),userName:'user10',idNumber:'11110@qq.com',userEmail:'女',userAddress:'五栋2303',userPhone:'12345678',isDeleted:'0'},
      ],
      search: '',
      value1:'',
      userId:[1,2,3,30,31,32,33,34,35,36,37,38,39,40,41,42,43,45,49, 66,67,68,69,70,71,72],
      disabled:[],
      userCopy:[],
    };
  },
  methods:{

// 点击禁用事件
    setCurrent(index){
        delUser(this.userArr[index].isDeleted,this.userArr[index].userId).then((res) => {
        })
    },

    //
    // // 删除事件
    // userDelete(index){
    //   this.userArr.splice(index,1);
    // },

  },
  created() {
      userList().then((res) => {
        this.userArr = res.data.data;
      })
    for (let i = 0;i<this.userArr.length;i++){
        if (this.userArr[i].isDeleted === true){
          this.disabled[i] = true;
        }else {
          this.disabled[i] = false;
        }
    }


  }
}
</script>

<style>


/*搜索按钮*/
.userList .regDate .search_button{
  background: transparent;
  color: #DCDFE6;
  border: none;
  position: absolute;
  font-size: 20px;
  left: 620px;
  top: 18px;
}
.userList .regDate .search_button:hover{
  color: #54b6ff;
}


.userList .el-table .cell {
  text-align: center;
}



</style>